<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8" />
		<title>悦读</title>
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/read.css" />
	</head>

	<body>
		<!--公共头部-->
		<div class="public-hd">
			<!--头部内容-->
			<div class="hd-content w clearfix">
				<!--logo部分-->
				<div class="hd-logo fl">
					<img src="images/header-images/hd-logo_03.png" alt="" />
					<a href="index.html">悦读 FM</a>
				</div>
				<!--导航-->
				<div class="hd-nav fl">
					<a href="#" target="_blank">悦读</a>
					<a href="#" target="_blank">情感</a>
					<a href="#" target="_blank">连播</a>
					<a href="#" target="_blank">校园</a>
					<a href="#" target="_blank">音乐</a>
					<a href="#" target="_blank">Labs</a>
				</div>
				<!--头部搜索-->
				<div class="hd-search fl">
					<form action="" method="" target="">
						<input type="text" class="search-key fl" name="searchStr">
						<button type="submit" class="sbtn fr"></button>
					</form>
				</div>
				<!--登录-->
				<div class="hd-login fl">
					<a href="#">登录</a>
					<a href="#">注册</a>
				</div>
			</div>
		</div>

		<!--页面内容开始-->
		<div class="main w clearfix">
			<!--左边浮动内容-->
			<div class="mian-left fl">
				<ul class="channel">
					<li>
						<div class="channel-group-img fl">
							<a href="#"><img src="images/read-img/read-icon_03.png" /></a>
						</div>
						<div class="channel-group-text fr">
							<h3><a href="">中秋</a></h3>
							<div class="group-text-meta">
								<i class="meta-pen">燕燕</i>
								<i class="meta-tong">羊小羔</i>
								<i class="meta-time">13:55</i>
								<i class="meta-erji">3600次</i>
							</div>
							<div class="group-text-exp">
								夏历八月十五日，正是「三秋恰半」，故名中秋。宋朝时的中秋节有赏月、赏桂、观潮、赏灯、吃月饼、饮酒赋诗等习俗。宋太宗时把中秋与新年、端午列为三大节日...
							</div>
						</div>
					</li>
					<li>
						<div class="channel-group-img fl">
							<a href="#"><img src="images/read-img/read-icon_19.png" /></a>
						</div>
						<div class="channel-group-text fr">
							<h3><a href="">中秋</a></h3>
							<div class="group-text-meta">
								<i class="meta-pen">燕燕</i>
								<i class="meta-tong">羊小羔</i>
								<i class="meta-time">13:55</i>
								<i class="meta-erji">3600次</i>
							</div>
							<div class="group-text-exp">
								夏历八月十五日，正是「三秋恰半」，故名中秋。宋朝时的中秋节有赏月、赏桂、观潮、赏灯、吃月饼、饮酒赋诗等习俗。宋太宗时把中秋与新年、端午列为三大节日...
							</div>
						</div>
					</li>
					<li>
						<div class="channel-group-img fl">
							<a href="#"><img src="images/read-img/read-icon_31.png" /></a>
						</div>
						<div class="channel-group-text fr">
							<h3><a href="">中秋</a></h3>
							<div class="group-text-meta">
								<i class="meta-pen">燕燕</i>
								<i class="meta-tong">羊小羔</i>
								<i class="meta-time">13:55</i>
								<i class="meta-erji">3600次</i>
							</div>
							<div class="group-text-exp">
								夏历八月十五日，正是「三秋恰半」，故名中秋。宋朝时的中秋节有赏月、赏桂、观潮、赏灯、吃月饼、饮酒赋诗等习俗。宋太宗时把中秋与新年、端午列为三大节日...
							</div>
						</div>
					</li>
					<li>
						<div class="channel-group-img fl">
							<a href="#"><img src="images/read-img/read-icon_27.png" /></a>
						</div>
						<div class="channel-group-text fr">
							<h3><a href="">中秋</a></h3>
							<div class="group-text-meta">
								<i class="meta-pen">燕燕</i>
								<i class="meta-tong">羊小羔</i>
								<i class="meta-time">13:55</i>
								<i class="meta-erji">3600次</i>
							</div>
							<div class="group-text-exp">
								夏历八月十五日，正是「三秋恰半」，故名中秋。宋朝时的中秋节有赏月、赏桂、观潮、赏灯、吃月饼、饮酒赋诗等习俗。宋太宗时把中秋与新年、端午列为三大节日...
							</div>
						</div>
					</li>
					<li>
						<div class="channel-group-img fl">
							<a href="#"><img src="images/read-img/read-icon_23.png" /></a>
						</div>
						<div class="channel-group-text fr">
							<h3><a href="">中秋</a></h3>
							<div class="group-text-meta">
								<i class="meta-pen">燕燕</i>
								<i class="meta-tong">羊小羔</i>
								<i class="meta-time">13:55</i>
								<i class="meta-erji">3600次</i>
							</div>
							<div class="group-text-exp">
								夏历八月十五日，正是「三秋恰半」，故名中秋。宋朝时的中秋节有赏月、赏桂、观潮、赏灯、吃月饼、饮酒赋诗等习俗。宋太宗时把中秋与新年、端午列为三大节日...
							</div>
						</div>
					</li>
					<li>
						<div class="channel-group-img fl">
							<a href="#"><img src="images/read-img/read-icon_21.png" /></a>
						</div>
						<div class="channel-group-text fr">
							<h3><a href="">中秋</a></h3>
							<div class="group-text-meta">
								<i class="meta-pen">燕燕</i>
								<i class="meta-tong">羊小羔</i>
								<i class="meta-time">13:55</i>
								<i class="meta-erji">3600次</i>
							</div>
							<div class="group-text-exp">
								夏历八月十五日，正是「三秋恰半」，故名中秋。宋朝时的中秋节有赏月、赏桂、观潮、赏灯、吃月饼、饮酒赋诗等习俗。宋太宗时把中秋与新年、端午列为三大节日...
							</div>
						</div>
					</li>

				</ul>
			</div>
			<!--右边浮动内容-->
			<div class="mian-right fr">
				<!--右边浮动图片-->
				<div class="listener"><img src="images/read-img/bg_01.png" /></div>
				<!--top-10-->
				<div class="channel1 clearfix">
					<h3 class="channel1-h3">悦读频道 TOP10</h3>
					<ul class="channel1-list">
						<li>
							<span>1.</span>
							<a href="#">爱情太短，遗忘太长</a>
							<p><span>文：聂鲁达</span><span>主播：阿准</span></p>
						</li>
						<li>
							<span>2.</span>
							<a href="#">那些你所不知道的大事</a>
							<p><span>文：李月亮</span><span>主播：薇薇</span></p>
						</li>
						<li>
							<span>3.</span>
							<a href="#">友情，这棵树上只有一个果子，叫做信任</a>
							<p><span>文：毕淑敏</span><span>主播：保罗大叔</span></p>
						</li>
						<li>
							<span>4.</span>
							<a href="#">你在，世界就在</a>
							<p><span>文：郁兰</span><span>主播：雨夜书简</span></p>
						</li>
						<li>
							<span>5.</span>
							<a href="#">望月的人</a>
							<p><span>文：艾明雅</span><span>主播：小默</span></p>
						</li>
						<li>
							<span>6.</span>
							<a href="#">爱情太短，遗忘太长</a>
							<p><span>文：聂鲁达</span><span>主播：阿准</span></p>
						</li>
						<li>
							<span>7.</span>
							<a href="#">那些你所不知道的大事</a>
							<p><span>文：李月亮</span><span>主播：薇薇</span></p>
						</li>
						<li>
							<span>8.</span>
							<a href="#">友情，这棵树上只有一个果子，叫做信任</a>
							<p><span>文：毕淑敏</span><span>主播：保罗大叔</span></p>
						</li>
						<li>
							<span>9.</span>
							<a href="#">你在，世界就在</a>
							<p><span>文：郁兰</span><span>主播：雨夜书简</span></p>
						</li>
						<li>
							<span>10.</span>
							<a href="#">望月的人</a>
							<p><span>文：艾明雅</span><span>主播：小默</span></p>
						</li>
					</ul>
				</div>
				<div class="fmad"><img src="images/main-img/bg.png"/></div>
			</div>
		</div>

		<!--底部-->
		<div class="ft">
			<!--内容部分-->
			<div class="ft ft-content w clearfix">
				<!--底部左边内容-->
				<div class="ft-joinus fl">
					<p class="ft-joinus-fist">
						<a href="#">关于我们</a>
						<span>|</span>
						<a href="#">加入我们</a>
					</p>
					<p class="ft-joinus-text">
						© 2010-2016 Yuedu.fm All rights reserved 粤ICP备14076392号
					</p>
				</div>
				<!--底部右边图片内容-->
				<<div class="ft-icon fr">
					
					<img class="dis-1" src="images/ft-images/icon1.png" alt="" />
					<img class="ico-1" src="images/ft-images/icon6.png"/>
					<img class="dis-2" src="images/ft-images/icon2.png" alt="" />	
					<img class="ico-2" src="images/ft-images/icon5.png"/>
					<img src="images/ft-images/icon3.png" alt="" />
				</div>
			</div>
		</div>
	</body>

</html>